<!DOCTYPE html>
<html lang="en">

<head>
    <meta charset="UTF-8" />
    <meta name="viewport" content="width=device-width, initial-scale=1.0" />
    <link rel="stylesheet" href="../../yl/index.css" />
    <link rel="stylesheet" href="../../style/index.css" />
    <title>菜品资料</title>
</head>

<body>
    <div id="app" v-cloak>
        <div class="title">
            <div>
                菜品名称<el-input v-model="page.value1" style="width: 200px; margin:0 10px;"
                    placeholder="请输入菜品名称"></el-input>
                <el-button icon="Search" style="margin: 0; margin-right: 10px;" @click="check">查询</el-button>
                <el-button icon="Refresh" style="margin: 0; margin-right: 10px;" @click="reset">重置</el-button>
                <el-button type="primary" icon="CirclePlus" style="margin: 0; margin-right: 10px;" @click="personalAdd"
                    plain round>添加</el-button>
                <!-- <el-button type="warning" icon="Download" style="margin: 0; margin-right: 10px;" @click="personalAdd"
                    plain round>批量导入</el-button>
                <el-button type="success" icon="Upload" style="margin: 0; margin-right: 10px;" @click="personalAdd"
                    plain round>批量导出</el-button>
                <el-button type="danger" icon="Delete" style="margin: 0; margin-right: 10px;" @click="personalAdd" plain
                    round>批量删除</el-button> -->
            </div>
        </div>
        <div class="body">
            <div class="left">
                <el-tree ref="tree" id="tree" default-expand-all :current-node-key="page.value2"
                    node-key="id" style="max-width: 600px" highlight-current :data="treeData"
                    :props="{ label:'name'}" default-expand-all @node-click="handleNodeClick"
                    :expand-on-click-node="false">
                    <template #default="{ node, data }">
                        <div class="custom-tree-node" style="justify-content: space-between;">
                            <span>{{ node.label }}</span>
                            <div class="item" v-if="node.level == 3"
                                :style="{backgroundColor:page.value2==data.id?'rgb(235.9, 245.3, 255)':''}">
                                <el-dropdown trigger="click">
                                    <el-button  type="text"  size="small">
                                        操作<el-icon class="el-icon--right"><arrow-down /></el-icon>
                                    </el-button>
                                    <template #dropdown>
                                        <el-dropdown-menu>
                                            <el-dropdown-item @click="handleEdit1(data)">
                                                编辑菜品
                                            </el-dropdown-item>
                                        </el-dropdown-menu>
                                    </template>
                                </el-dropdown>
                            </div>
                        </div>
                    </template>
                </el-tree>
            </div>
            <div class="right">
                <el-table id="table" border
                    :data-options="JSON.stringify({ 'TableName': 'dish_info ','primary_key':'Dish_SerialNumber'})"
                    height="450" ref="multipleTable" tooltip-effect="dark" :data="Tabletdata"
                    @selection-change="handleSelectionChange">
                    <el-table-column min-width="180" v-for="column in columns" :key="column.COLUMN_NAME"
                        :prop="column.COLUMN_NAME" :label="column.COLUMN_COMMENT">
                        <template v-slot="{row}">
                            <div v-if="isValueType(row[column.COLUMN_NAME])=='image'">
                                <el-image style="width: 100px; height: 100px" :src="photo + row[column.COLUMN_NAME]"
                                    fit="contain"></el-image>
                            </div>
                            <span v-else-if="column.COLUMN_NAME === 'is_Featured' || 
                                            column.COLUMN_NAME === 'is_Spicy' || 
                                            column.COLUMN_NAME === 'is_Vegetarian'">
                                {{ [1, '1', true].includes(row[column.COLUMN_NAME]) ? '是' : '否' }}
                            </span>
                            <template v-else>
                                {{row[column.COLUMN_NAME]}}
                            </template>
                        </template>
                    </el-table-column>
                    <el-table-column label="操作" fixed="right" width="160">
                        <template #default="{row}">
                            <el-button size="small" @click="handleEdit(row)">
                                编辑
                            </el-button>
                            <el-button size="small" type="danger" @click="handleDelete(row)">
                                删除
                            </el-button>
                        </template>
                    </el-table-column>
                </el-table>
                <el-pagination style="margin-top: 1%;" :current-page="page.PageNumber" :page-size="page.RowAmount"
                    :page-sizes="[10, 100, 200, 300, 400]" layout="total, sizes, prev, pager, next, jumper"
                    :total="Total" @size-change="handleSizeChange" @current-change="handleCurrentChange" />
            </div>
        </div>

    </div>
    </div>
    <script src="../../utils/utils.js"></script>
    <script src="../../config/config.js"></script>
    <script src="../../utils/mixins.js"></script>
    <script src="../../yl/vue.js"></script>
    <script src="../../yl/index.js"></script>
    <script src="../../yl/zh-cn.mjs"></script>
    <script src="../../yl/index.iife.min.js"></script>
    <script src="../../yl/jquery.min.js"></script>
    <script src="../../utils/jquery.cookie.js"></script>
    <script src="../../api/request.js"></script>
    <script src="js/index.js"></script>
</body>

</html>